<template>
    <view @touchmove.stop.prevent="preventTouchMoveFun" class="image-cropper">
        <view @tap="clickFun" @touchend="cutTouchEndFun" @touchmove="cutTouchMoveFun" @touchstart="cutTouchStartFun" class="main">
            <view class="content">
                <view
                    :class="'content_top bg_gray ' + (flag_bright_var ? '' : 'bg_black')"
                    :style="'height:' + cut_topClone + 'px;transition-property:' + (cut_animation_var ? '' : 'background')"
                ></view>
                <view class="content_middle" :style="'height:' + heightClone + 'px;'">
                    <view
                        :class="'content_middle_left bg_gray ' + (flag_bright_var ? '' : 'bg_black')"
                        :style="'width:' + cut_leftClone + 'px;transition-property:' + (cut_animation_var ? '' : 'background')"
                    ></view>
                    <view
                        class="content_middle_middle"
                        :style="
                            'width:' + widthClone + 'px;height:' + heightClone + 'px;transition-duration: .3s;transition-property:' + (cut_animation_var ? '' : 'background') + ';'
                        "
                    >
                        <view class="border border-top-left"></view>
                        <view class="border border-top-right"></view>
                        <view class="border border-right-top"></view>
                        <view class="border border-right-bottom"></view>
                        <view class="border border-bottom-right"></view>
                        <view class="border border-bottom-left"></view>
                        <view class="border border-left-bottom"></view>
                        <view class="border border-left-top"></view>
                    </view>
                    <view
                        :class="'content_middle_right bg_gray ' + (flag_bright_var ? '' : 'bg_black')"
                        :style="'transition-property:' + (cut_animation_var ? '' : 'background')"
                    ></view>
                </view>
                <view :class="'content_bottom bg_gray ' + (flag_bright_var ? '' : 'bg_black')" :style="'transition-property:' + (cut_animation_var ? '' : 'background')"></view>
            </view>
            <image
                @load="imageLoad"
                @touchend="endFun"
                @touchmove="moveFun"
                @touchstart="startFun"
                class="img"
                :src="imgSrcClone"
                :style="
                    'width:' +
                    (img_widthClone ? img_widthClone + 'px' : 'auto') +
                    ';height:' +
                    (img_heightClone ? img_heightClone + 'px' : 'auto') +
                    ';transform:translate3d(' +
                    (img_left_var - img_widthClone / 2) +
                    'px,' +
                    (img_top_var - img_heightClone / 2) +
                    'px,0) scale(' +
                    scaleClone +
                    ') rotate(' +
                    angleClone +
                    'deg);transition-duration:' +
                    (cut_animation_var ? 0.4 : 0) +
                    's;'
                "
            ></image>
        </view>
        <canvas
            canvasId="image-cropper"
            class="image-cropper-canvas"
            :disableScroll="true"
            :style="
                'width:' + canvas_width_var * export_scale + 'px;height:' + canvas_height_var * export_scale + 'px;left:' + canvas_leftClone + 'px;top:' + canvas_topClone + 'px'
            "
        ></canvas>
    </view>
</template>

<script>
export default {
    data() {
        return {
            el: 'image-cropper',
            info: uni.getSystemInfoSync(),
            MOVE_THROTTLE: null,
            MOVE_THROTTLE_FLAG: true,
            INIT_IMGWIDTH: 0,
            INIT_IMGHEIGHT: 0,
            TIME_BG: null,
            TIME_CUT_CENTER: null,

            touch_img_relative_var: [
                {
                    x: 0,
                    y: 0
                }
            ],

            flag_cut_touch_var: false,
            hypotenuse_length_var: 0,
            flag_img_endtouch_var: false,
            flag_bright_var: true,
            canvas_overflow_var: false,
            canvas_width_var: 200,
            canvas_height_var: 250,
            origin_x: 0.5,
            origin_y: 0.5,
            cut_animation_var: false,
            img_top_var: uni.getSystemInfoSync().windowHeight / 2,
            img_left_var: uni.getSystemInfoSync().windowWidth / 2,

            watch: {
                width: function (t, a) {
                    if (t < a.data.min_width) {
                        a.setData({
                            widthClone: a.data.min_width
                        });
                    }
                    a._computeCutSize();
                },
                height: function (t, a) {
                    if (t < a.data.min_height) {
                        a.setData({
                            heightClone: a.data.min_height
                        });
                    }
                    a._computeCutSize();
                },
                angle: function (t, a) {
                    a._moveStop();
                    if (a.data.limit_move && a.data.angle % 90) {
                        a.setData({
                            angleClone: 90 * Math.round(a.data.angle / 90)
                        });
                    }
                },
                _cut_animation: function (t, a) {
                    clearTimeout(a.data._cut_animation_time);
                    if (t) {
                        a.data._cut_animation_time = setTimeout(function () {
                            a.setData({
                                cut_animation_var: false
                            });
                        }, 300);
                    }
                },
                limit_move: function (t, a) {
                    if (t) {
                        if (a.data.angle % 90) {
                            a.setData({
                                angleClone: 90 * Math.round(a.data.angle / 90)
                            });
                        }
                        a._imgMarginDetectionScale();
                        if (!a.data._canvas_overflow) {
                            a._draw();
                        }
                    }
                },
                canvas_top: function (t, a) {
                    a._canvasDetectionPosition();
                },
                canvas_left: function (t, a) {
                    a._canvasDetectionPosition();
                },
                imgSrc: function (t, a) {
                    a.pushImg();
                },
                cut_top: function (t, a) {
                    a._cutDetectionPosition();
                    if (a.data.limit_move && !a.data._canvas_overflow) {
                        a._draw();
                    }
                },
                cut_left: function (t, a) {
                    a._cutDetectionPosition();
                    if (a.data.limit_move && !a.data._canvas_overflow) {
                        a._draw();
                    }
                }
            },

            widthClone: '',
            heightClone: '',
            angleClone: '',
            imgSrcClone: '',
            cut_leftClone: '',
            cut_topClone: '',
            scaleClone: '',
            limit_moveClone: '',
            canvas_topClone: '',
            canvas_leftClone: '',
            img_widthClone: '',
            img_heightClone: ''
        };
    },
    props: {
        imgSrc: {
            type: String
        },
        height: {
            type: Number,
            default: 200
        },
        width: {
            type: Number,
            default: 200
        },
        min_width: {
            type: Number,
            default: 100
        },
        min_height: {
            type: Number,
            default: 100
        },
        max_width: {
            type: Number,
            default: 320
        },
        max_height: {
            type: Number,
            default: 320
        },
        disable_width: {
            type: Boolean,
            default: true
        },
        disable_height: {
            type: Boolean,
            default: true
        },
        disable_ratio: {
            type: Boolean,
            default: true
        },
        export_scale: {
            type: Number,
            default: 3
        },
        quality: {
            type: Number,
            default: 1
        },
        cut_top: {
            type: Number,
            default: null
        },
        cut_left: {
            type: Number,
            default: null
        },
        canvas_top: {
            type: Number,
            default: null
        },
        canvas_left: {
            type: Number,
            default: null
        },
        img_width: {
            type: null,
            default: 300
        },
        img_height: {
            type: null,
            default: null
        },
        scale: {
            type: Number,
            default: 1
        },
        angle: {
            type: Number,
            default: 0
        },
        min_scale: {
            type: Number,
            default: 0.5
        },
        max_scale: {
            type: Number,
            default: 2
        },
        disable_rotate: {
            type: Boolean,
            default: false
        },
        limit_move: {
            type: Boolean,
            default: true
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached: function () {
            this.info = uni.getSystemInfoSync();
            this.watcherFun();
            this.INIT_IMGWIDTH = this.img_width;
            this.INIT_IMGHEIGHT = this.img_height;
            this.setData({
                canvas_height_var: this.height,
                canvas_width_var: this.width
            });
            this.initCanvasFun();
            if (this.imgSrc) {
                this.imgSrc = this.imgSrc;
            }
            this.initImageSizeFun();
            this.computeCutSizeFun();
            this.cutDetectionPositionFun();
            this.canvasDetectionPositionFun();
            this.$emit('load', {
                detail: {
                    cropper: this
                }
            });
        },

        upload: function () {
            console.log('image-cropper.js=>upload');
            var that = this;
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: function (a) {
                    var i = a.tempFilePaths[0];
                    that.pushImg(i);
                    uni.showLoading({
                        title: '加载中...'
                    });
                }
            });
        },

        pushImg: function (t) {
            var that = this;
            if (t) {
                this.setData({
                    imgSrcClone: t
                });
            } else {
                if (this.imgSrc) {
                    uni.getImageInfo({
                        src: this.imgSrc,
                        success: function (t) {
                            that.imageObject = t;
                            if (-1 == that.imgSrc.search(/tmp/)) {
                                that.setData({
                                    imgSrcClone: t.path
                                });
                            }
                            that.imgComputeSizeFun();
                            if (that.limit_move) {
                                that.imgMarginDetectionScaleFun();
                            }
                            that.drawFun();
                        },
                        fail: function (t) {
                            that.setData({
                                imgSrcClone: ''
                            });
                        }
                    });
                }
            }
        },

        imageLoad: function (t) {
            var that = this;
            setTimeout(function () {
                that.$emit('imageload', {
                    detail: that.imageObject
                });
            }, 1000);
        },

        getImg: function (t) {
            var that = this;
            this.drawFun(function () {
                uni.canvasToTempFilePath(
                    {
                        width: that.width * that.export_scale,
                        height: Math.round(that.height * that.export_scale),
                        destWidth: that.width * that.export_scale,
                        destHeight: Math.round(that.height) * that.export_scale,
                        fileType: 'jpg',
                        quality: that.quality,
                        canvasId: that.el,
                        success: function (i) {
                            t({
                                url: i.tempFilePath,
                                width: that.width * that.export_scale,
                                height: that.height * that.export_scale
                            });
                        }
                    },
                    that
                );
            });
        },

        setTransform: function (t) {
            if (t) {
                this.disable_rotate ||
                    this.setData({
                        angleClone: t.angle ? this.angle + t.angle : this.angle
                    });
                var a = this.scale;
                if (t.scale) {
                    a = (a = (a = this.scale + t.scale) <= this.min_scale ? this.min_scale : a) >= this.max_scale ? this.max_scale : a;
                }
                this.scale = a;
                var i = this.cut_left;
                var h = this.cut_top;
                if (t.cutX) {
                    this.setData({
                        cut_leftClone: i + t.cutX
                    });
                    this.watch.cut_left(null, this);
                }
                if (t.cutY) {
                    this.setData({
                        cut_topClone: h + t.cutY
                    });
                    this.watch.cut_top(null, this);
                }
                this._img_top = t.y ? this._img_top + t.y : this._img_top;
                this._img_left = t.x ? this._img_left + t.x : this._img_left;
                this.imgMarginDetectionScaleFun();
                this.moveDuringFun();
                this.setData({
                    scaleClone: this.scale,
                    img_top_var: this._img_top,
                    img_left_var: this._img_left
                });
                if (!this._canvas_overflow) {
                    this.drawFun();
                }
                this.moveStopFun();
            }
        },

        setCutXY: function (t, a) {
            this.setData({
                cut_topClone: a,
                cut_leftClone: t
            });
        },

        setCutSize: function (t, a) {
            this.setData({
                widthClone: t,
                heightClone: a
            });
            this.computeCutSizeFun();
        },

        setCutCenter: function () {
            var t = 0.5 * (this.info.windowHeight - this.height);
            t *= 0.7;
            var a = 0.5 * (this.info.windowWidth - this.width);
            this.setData({
                img_top_var: this._img_top - this.cut_top + t,
                cut_topClone: t,
                img_left_var: this._img_left - this.cut_left + a,
                cut_leftClone: a
            });
        },

        setCutCenterFun: function () {
            var t = 0.5 * (this.info.windowHeight - this.height);
            var a = 0.5 * (this.info.windowWidth - this.width);
            this.setData({
                cut_topClone: t,
                cut_leftClone: a
            });
        },

        setWidth: function (t) {
            this.setData({
                widthClone: t
            });
            this.computeCutSizeFun();
        },

        setHeight: function (t) {
            this.setData({
                heightClone: t
            });
            this.computeCutSizeFun();
        },

        setDisableRotate: function (t) {
            this.disable_rotate = t;
        },

        setLimitMove: function (t) {
            this.setData({
                cut_animation_var: true,
                limit_moveClone: !!t
            });
        },

        imgReset: function () {
            this.setData({
                scaleClone: 1,
                angleClone: 0,
                img_top_var: uni.getSystemInfoSync().windowHeight / 2,
                img_left_var: uni.getSystemInfoSync().windowWidth / 2
            });
        },

        setScale: function (t) {
            if (t) {
                this.setData({
                    scaleClone: t
                });
                if (!this._canvas_overflow) {
                    this.drawFun();
                }
            }
        },

        setAngle: function (t) {
            if (t) {
                this.setData({
                    cut_animation_var: true,
                    angleClone: t
                });
                this.imgMarginDetectionScaleFun();
                if (!this._canvas_overflow) {
                    this.drawFun();
                }
            }
        },

        initCanvasFun: function () {
            this.ctx || (this.ctx = uni.createCanvasContext('image-cropper', this));
        },

        initImageSizeFun: function () {
            if (this.INIT_IMGWIDTH && 'string' == typeof this.INIT_IMGWIDTH && -1 != this.INIT_IMGWIDTH.indexOf('%')) {
                var t = this.INIT_IMGWIDTH.replace('%', '');
                this.INIT_IMGWIDTH = this.img_width = (this.info.windowWidth / 100) * t;
            }
            if (this.INIT_IMGHEIGHT && 'string' == typeof this.INIT_IMGHEIGHT && -1 != this.INIT_IMGHEIGHT.indexOf('%')) {
                var a = this.img_height.replace('%', '');
                this.INIT_IMGHEIGHT = this.img_height = (this.info.windowHeight / 100) * a;
            }
        },

        cutDetectionPositionFun: function () {
            var that = this;
            var a = function () {
                if (that.cut_top < 0) {
                    that.setData({
                        cut_topClone: 0
                    });
                }
                if (that.cut_top > that.info.windowHeight - that.height) {
                    that.setData({
                        cut_topClone: that.info.windowHeight - that.height
                    });
                }
            };
            var i = function () {
                if (that.cut_left < 0) {
                    that.setData({
                        cut_leftClone: 0
                    });
                }
                if (that.cut_left > that.info.windowWidth - that.width) {
                    that.setData({
                        cut_leftClone: that.info.windowWidth - that.width
                    });
                }
            };
            null == this.cut_top && null == this.cut_left
                ? this.setCutCenterFun()
                : null != this.cut_top && null != this.cut_left
                ? (a(), i())
                : null != this.cut_top && null == this.cut_left
                ? (a(),
                  this.setData({
                      cut_leftClone: (this.info.windowWidth - this.width) / 2
                  }))
                : null == this.cut_top &&
                  null != this.cut_left &&
                  (i(),
                  this.setData({
                      cut_topClone: (this.info.windowHeight - this.height) / 2
                  }));
        },

        canvasDetectionPositionFun: function () {
            null == this.canvas_top && null == this.canvas_left
                ? ((this._canvas_overflow = false),
                  this.setData({
                      canvas_topClone: -5000,
                      canvas_leftClone: -5000
                  }))
                : null != this.canvas_top && null != this.canvas_left
                ? this.canvas_top < -this.height || this.canvas_top > this.info.windowHeight
                    ? (this._canvas_overflow = true)
                    : (this._canvas_overflow = false)
                : null != this.canvas_top && null == this.canvas_left
                ? this.setData({
                      canvas_leftClone: 0
                  })
                : null == this.canvas_top &&
                  null != this.canvas_left &&
                  (this.setData({
                      canvas_topClone: 0
                  }),
                  this.canvas_left < -this.width || this.canvas_left > this.info.windowWidth ? (this._canvas_overflow = true) : (this._canvas_overflow = false));
        },

        imgMarginDetectionPositionFun: function (t) {
            if (this.limit_move) {
                var a = this._img_left;
                var i = this._img_top;
                var h = ((t = t || this.scale), this.img_width);
                var e = this.img_height;
                if ((this.angle / 90) % 2) {
                    h = this.img_height;
                    e = this.img_width;
                }
                a = this.cut_left + (h * t) / 2 >= a ? a : this.cut_left + (h * t) / 2;
                a = this.cut_left + this.width - (h * t) / 2 <= a ? a : this.cut_left + this.width - (h * t) / 2;
                i = this.cut_top + (e * t) / 2 >= i ? i : this.cut_top + (e * t) / 2;
                i = this.cut_top + this.height - (e * t) / 2 <= i ? i : this.cut_top + this.height - (e * t) / 2;
                this.setData({
                    img_left_var: a,
                    img_top_var: i,
                    scaleClone: t
                });
            }
        },

        imgMarginDetectionScaleFun: function () {
            if (this.limit_move) {
                var t = this.scale;
                var a = this.img_width;
                var i = this.img_height;
                if ((this.angle / 90) % 2) {
                    a = this.img_height;
                    i = this.img_width;
                }
                if (a * t < this.width) {
                    t = this.width / a;
                }
                if (i * t < this.height) {
                    t = Math.max(t, this.height / i);
                }
                this.imgMarginDetectionPositionFun(t);
            }
        },

        setDataFun: function (t) {
            var a = {};
            for (var i in t) {
                if (this[i] != t[i]) {
                    a[i] = t[i];
                }
            }
            this.setData(a);
            return a;
        },

        imgComputeSizeFun: function () {
            var t = this.img_width;
            var a = this.img_height;
            this.INIT_IMGHEIGHT || this.INIT_IMGWIDTH
                ? this.INIT_IMGHEIGHT && !this.INIT_IMGWIDTH
                    ? (t = (this.imageObject.width / this.imageObject.height) * this.INIT_IMGHEIGHT)
                    : !this.INIT_IMGHEIGHT && this.INIT_IMGWIDTH && (a = (this.imageObject.height / this.imageObject.width) * this.INIT_IMGWIDTH)
                : (t = this.imageObject.width) / (a = this.imageObject.height) > this.width / this.height
                ? ((a = this.height), (t = (this.imageObject.width / this.imageObject.height) * a))
                : ((t = this.width), (a = (this.imageObject.height / this.imageObject.width) * t));
            this.setData({
                img_widthClone: t,
                img_heightClone: a
            });
        },

        computeCutSizeFun: function () {
            this.width > this.info.windowWidth
                ? this.setData({
                      widthClone: this.info.windowWidth
                  })
                : this.width + this.cut_left > this.info.windowWidth &&
                  this.setData({
                      cut_leftClone: this.info.windowWidth - this.cut_left
                  });
            this.height > this.info.windowHeight
                ? this.setData({
                      heightClone: this.info.windowHeight
                  })
                : this.height + this.cut_top > this.info.windowHeight &&
                  this.setData({
                      cut_topClone: this.info.windowHeight - this.cut_top
                  });
            if (!this._canvas_overflow) {
                this.drawFun();
            }
        },

        startFun: function (t) {
            this._flag_img_endtouch = false;
            if (1 == t.touches.length) {
                this._touch_img_relative[0] = {
                    x: t.touches[0].clientX - this._img_left,
                    y: t.touches[0].clientY - this._img_top
                };
            } else {
                var a = Math.abs(t.touches[0].clientX - t.touches[1].clientX);
                var i = Math.abs(t.touches[0].clientY - t.touches[1].clientY);
                this._touch_img_relative = [
                    {
                        x: t.touches[0].clientX - this._img_left,
                        y: t.touches[0].clientY - this._img_top
                    },
                    {
                        x: t.touches[1].clientX - this._img_left,
                        y: t.touches[1].clientY - this._img_top
                    }
                ];
                this._hypotenuse_length = Math.sqrt(Math.pow(a, 2) + Math.pow(i, 2));
            }
            if (!this._canvas_overflow) {
                this.drawFun();
            }
        },

        move_throttleFun: function () {
            var that = this;
            if ('android' == this.info.platform) {
                clearTimeout(this.MOVE_THROTTLE);
                this.MOVE_THROTTLE = setTimeout(function () {
                    that.MOVE_THROTTLE_FLAG = true;
                }, 25);
                return this.MOVE_THROTTLE_FLAG;
            }
            this.MOVE_THROTTLE_FLAG = true;
        },

        moveFun: function (t) {
            if (!this._flag_img_endtouch && this.MOVE_THROTTLE_FLAG) {
                this.MOVE_THROTTLE_FLAG = false;
                this.move_throttleFun();
                this.moveDuringFun();
                if (1 == t.touches.length) {
                    var a = t.touches[0].clientX - this._touch_img_relative[0].x;
                    var i = t.touches[0].clientY - this._touch_img_relative[0].y;
                    this._img_left = a;
                    this._img_top = i;
                    this.imgMarginDetectionPositionFun();
                    this.setData({
                        img_left_var: this._img_left,
                        img_top_var: this._img_top
                    });
                } else {
                    var h = Math.abs(t.touches[0].clientX - t.touches[1].clientX);
                    var e = Math.abs(t.touches[0].clientY - t.touches[1].clientY);
                    var s = Math.sqrt(Math.pow(h, 2) + Math.pow(e, 2));
                    var d = this.scale * (s / this._hypotenuse_length);
                    var _ = 0;
                    d = (d = d <= this.min_scale ? this.min_scale : d) >= this.max_scale ? this.max_scale : d;
                    this.scale = d;
                    this.imgMarginDetectionScaleFun();
                    var n = [
                        {
                            x: t.touches[0].clientX - this._img_left,
                            y: t.touches[0].clientY - this._img_top
                        },
                        {
                            x: t.touches[1].clientX - this._img_left,
                            y: t.touches[1].clientY - this._img_top
                        }
                    ];
                    if (!this.disable_rotate) {
                        var o = (180 / Math.PI) * Math.atan2(n[0].y, n[0].x) - (180 / Math.PI) * Math.atan2(this._touch_img_relative[0].y, this._touch_img_relative[0].x);
                        var c = (180 / Math.PI) * Math.atan2(n[1].y, n[1].x) - (180 / Math.PI) * Math.atan2(this._touch_img_relative[1].y, this._touch_img_relative[1].x);
                        0 != o ? (_ = o) : 0 != c && (_ = c);
                    }
                    this._touch_img_relative = n;
                    this._hypotenuse_length = Math.sqrt(Math.pow(h, 2) + Math.pow(e, 2));
                    this.setData({
                        angleClone: this.angle + _,
                        scaleClone: this.scale
                    });
                }
                if (!this._canvas_overflow) {
                    this.drawFun();
                }
            }
        },

        endFun: function (t) {
            this._flag_img_endtouch = true;
            this.moveStopFun();
        },

        clickFun: function (t) {
            var that = this;
            this.imgSrc
                ? this.drawFun(function () {
                      var i = t.detail ? t.detail.x : t.touches[0].clientX;
                      var h = t.detail ? t.detail.y : t.touches[0].clientY;
                      if (i >= that.cut_left && i <= that.cut_left + that.width && h >= that.cut_top && h <= that.cut_top + that.height) {
                          uni.canvasToTempFilePath(
                              {
                                  width: that.width * that.export_scale,
                                  height: Math.round(that.height * that.export_scale),
                                  destWidth: that.width * that.export_scale,
                                  destHeight: Math.round(that.height) * that.export_scale,
                                  fileType: 'png',
                                  quality: that.quality,
                                  canvasId: that.el,
                                  success: function (t) {
                                      that.$emit('tapcut', {
                                          detail: {
                                              url: t.tempFilePath,
                                              width: that.width * that.export_scale,
                                              height: that.height * that.export_scale
                                          }
                                      });
                                  }
                              },
                              that
                          );
                      }
                  })
                : this.upload();
        },

        drawFun: function (t) {
            var that = this;
            if (this.imgSrc) {
                var i = function () {
                    var i = that.img_width * that.scale * that.export_scale;
                    var h = that.img_height * that.scale * that.export_scale;
                    var e = that._img_left - that.cut_left;
                    var s = that._img_top - that.cut_top;
                    that.ctx.translate(e * that.export_scale, s * that.export_scale);
                    that.ctx.rotate((that.angle * Math.PI) / 180);
                    that.ctx.drawImage(that.imgSrc, -i / 2, -h / 2, i, h);
                    that.ctx.draw(false, function () {
                        if (t) {
                            t();
                        }
                    });
                };
                this.ctx.width != this.width || this.ctx.height != this.height
                    ? this.setData(
                          {
                              canvas_height_var: this.height,
                              canvas_width_var: this.width
                          },
                          function () {
                              setTimeout(function () {
                                  i();
                              }, 40);
                          }
                      )
                    : i();
            }
        },

        cutTouchMoveFun: function (t) {
            var that = this;
            if (this._flag_cut_touch && this.MOVE_THROTTLE_FLAG) {
                if (this.disable_ratio && (this.disable_width || this.disable_height)) {
                    return;
                }
                this.MOVE_THROTTLE_FLAG = false;
                this.move_throttleFun();
                var i = this.width;
                var h = this.height;
                var e = this.cut_top;
                var s = this.cut_left;
                var d = function () {
                    i = i <= that.max_width ? (i >= that.min_width ? i : that.min_width) : that.max_width;
                    h = h <= that.max_height ? (h >= that.min_height ? h : that.min_height) : that.max_height;
                };
                var _ = function () {
                    return (i > that.max_width || i < that.min_width || h > that.max_height || h < that.min_height) && that.disable_ratio ? (d(), false) : (d(), true);
                };
                switch (
                    ((h = this.CUT_START.height + (this.CUT_START.corner > 1 && this.CUT_START.corner < 4 ? 1 : -1) * (this.CUT_START.y - t.touches[0].clientY)),
                    this.CUT_START.corner)
                ) {
                    case 1:
                        i = this.CUT_START.width + this.CUT_START.x - t.touches[0].clientX;
                        if (this.disable_ratio) {
                            h = i / (this.width / this.height);
                        }
                        if (!_()) {
                            return;
                        }
                        s = this.CUT_START.cut_left - (i - this.CUT_START.width);
                        break;
                    case 2:
                        i = this.CUT_START.width + this.CUT_START.x - t.touches[0].clientX;
                        if (this.disable_ratio) {
                            h = i / (this.width / this.height);
                        }
                        if (!_()) {
                            return;
                        }
                        e = this.CUT_START.cut_top - (h - this.CUT_START.height);
                        s = this.CUT_START.cut_left - (i - this.CUT_START.width);
                        break;
                    case 3:
                        i = this.CUT_START.width - this.CUT_START.x + t.touches[0].clientX;
                        if (this.disable_ratio) {
                            h = i / (this.width / this.height);
                        }
                        if (!_()) {
                            return;
                        }
                        e = this.CUT_START.cut_top - (h - this.CUT_START.height);
                        break;
                    case 4:
                        i = this.CUT_START.width - this.CUT_START.x + t.touches[0].clientX;
                        if (this.disable_ratio) {
                            h = i / (this.width / this.height);
                        }
                        if (!_()) {
                            return;
                        }
                }
                this.disable_width || this.disable_height
                    ? this.disable_width
                        ? this.disable_height ||
                          this.setData({
                              heightClone: h,
                              cut_topClone: e
                          })
                        : this.setData({
                              widthClone: i,
                              cut_leftClone: s
                          })
                    : this.setData({
                          widthClone: i,
                          cut_leftClone: s,
                          heightClone: h,
                          cut_topClone: e
                      });
                this.imgMarginDetectionScaleFun();
            }
        },

        cutTouchStartFun: function (t) {
            var a = t.touches[0].clientX;
            var i = t.touches[0].clientY;
            var h = this.cut_top + this.height - 30;
            var e = this.cut_top + this.height + 20;
            var s = this.cut_left + this.width - 30;
            var d = this.cut_left + this.width + 30;
            var _ = this.cut_top - 30;
            var n = this.cut_top + 30;
            var o = this.cut_left + this.width - 30;
            var c = this.cut_left + this.width + 30;
            var u = this.cut_top - 30;
            var l = this.cut_top + 30;
            var g = this.cut_left - 30;
            var m = this.cut_left + 30;
            var r = this.cut_top + this.height - 30;
            var f = this.cut_top + this.height + 30;
            var w = this.cut_left - 30;
            var T = this.cut_left + 30;
            a > s && a < d && i > h && i < e
                ? (this.moveDuringFun(),
                  (this._flag_cut_touch = true),
                  (this._flag_img_endtouch = true),
                  (this.CUT_START = {
                      width: this.width,
                      height: this.height,
                      x: a,
                      y: i,
                      corner: 4
                  }))
                : a > o && a < c && i > _ && i < n
                ? (this.moveDuringFun(),
                  (this._flag_cut_touch = true),
                  (this._flag_img_endtouch = true),
                  (this.CUT_START = {
                      width: this.width,
                      height: this.height,
                      x: a,
                      y: i,
                      cut_top: this.cut_top,
                      cut_left: this.cut_left,
                      corner: 3
                  }))
                : a > g && a < m && i > u && i < l
                ? (this.moveDuringFun(),
                  (this._flag_cut_touch = true),
                  (this._flag_img_endtouch = true),
                  (this.CUT_START = {
                      width: this.width,
                      height: this.height,
                      cut_top: this.cut_top,
                      cut_left: this.cut_left,
                      x: a,
                      y: i,
                      corner: 2
                  }))
                : a > w &&
                  a < T &&
                  i > r &&
                  i < f &&
                  (this.moveDuringFun(),
                  (this._flag_cut_touch = true),
                  (this._flag_img_endtouch = true),
                  (this.CUT_START = {
                      width: this.width,
                      height: this.height,
                      cut_top: this.cut_top,
                      cut_left: this.cut_left,
                      x: a,
                      y: i,
                      corner: 1
                  }));
        },

        cutTouchEndFun: function (t) {
            this.moveStopFun();
            this._flag_cut_touch = false;
        },

        moveStopFun: function () {
            var that = this;
            clearTimeout(this.TIME_CUT_CENTER);
            this.TIME_CUT_CENTER = setTimeout(function () {
                that._cut_animation ||
                    that.setData({
                        cut_animation_var: true
                    });
                that.setCutCenter();
            }, 1000);
            clearTimeout(this.TIME_BG);
            this.TIME_BG = setTimeout(function () {
                if (that._flag_bright) {
                    that.setData({
                        flag_bright_var: false
                    });
                }
            }, 2000);
        },

        moveDuringFun: function () {
            clearTimeout(this.TIME_CUT_CENTER);
            clearTimeout(this.TIME_BG);
            this._flag_bright ||
                this.setData({
                    flag_bright_var: true
                });
        },

        watcherFun: function () {
            var that = this;
            Object.keys(this).forEach(function (a) {
                that.observeFun(that, a, that.watch[a]);
            });
        },

        observeFun: function (t, a, i) {
            var that = this;
            var e = t[a];
            Object.defineProperty(t, a, {
                configurable: true,
                enumerable: true,
                set: function (t) {
                    e = t;
                    if (i) {
                        i(e, that);
                    }
                },
                get: function () {
                    if (
                        e &&
                        -1 !=
                            '_img_top|img_left||width|height|min_width|max_width|min_height|max_height|export_scale|cut_top|cut_left|canvas_top|canvas_left|img_width|img_height|scale|angle|min_scale|max_scale'.indexOf(
                                a
                            )
                    ) {
                        var t = parseFloat(parseFloat(e).toFixed(3));
                        if ('string' == typeof e && -1 != e.indexOf('%')) {
                            t += '%';
                        }
                        return t;
                    }
                    return e;
                }
            });
        },

        preventTouchMoveFun: function () {}
    },
    created: function () {},
    watch: {
        width: {
            handler: function (newVal, oldVal) {
                this.widthClone = newVal;
            },

            immediate: true
        },

        height: {
            handler: function (newVal, oldVal) {
                this.heightClone = newVal;
            },

            immediate: true
        },

        angle: {
            handler: function (newVal, oldVal) {
                this.angleClone = newVal;
            },

            immediate: true
        },

        imgSrc: {
            handler: function (newVal, oldVal) {
                this.imgSrcClone = newVal;
            },

            immediate: true
        },

        cut_left: {
            handler: function (newVal, oldVal) {
                this.cut_leftClone = newVal;
            },

            immediate: true
        },

        cut_top: {
            handler: function (newVal, oldVal) {
                this.cut_topClone = newVal;
            },

            immediate: true
        },

        scale: {
            handler: function (newVal, oldVal) {
                this.scaleClone = newVal;
            },

            immediate: true
        },

        limit_move: {
            handler: function (newVal, oldVal) {
                this.limit_moveClone = newVal;
            },

            immediate: true
        },

        canvas_top: {
            handler: function (newVal, oldVal) {
                this.canvas_topClone = newVal;
            },

            immediate: true
        },

        canvas_left: {
            handler: function (newVal, oldVal) {
                this.canvas_leftClone = newVal;
            },

            immediate: true
        },

        img_width: {
            handler: function (newVal, oldVal) {
                this.img_widthClone = newVal;
            },

            immediate: true
        },

        img_height: {
            handler: function (newVal, oldVal) {
                this.img_heightClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import 'image-cropper.css';
</style>
